import React from 'react';
import { Button, Divider, Form, Input } from 'antd';
import { Link, useNavigate } from 'react-router-dom';
import LoginWrap from './LoginWrap';
import axios from '../../utils/http';
//登录页
const Login = () => {
  const [form] = Form.useForm();
  const navigate = useNavigate();

  const login_click = async () => {
    //点击登录按钮,获取到form表单的信息
    const form_data = await form.validateFields();
    if (form_data) {
      console.log(form_data);
      const res = await axios.post('/api/login', form_data);
      console.log('res', res);
      //登录成功跳到project页面
      if (res.data.code === 0) {
        navigate('/project');
      }
    }
  };

  return (
    <LoginWrap>
      <Form form={form} className='login_form_wrap'>
        <h2>请登录</h2>
        <p>登录界面</p>
        <Form.Item
          name='username'
          rules={[{ required: true, message: '请输入用户名' }]}
          style={{ display: 'flex', justifyContent: 'center' }}
        >
          <Input type='text' placeholder='用户名' style={{ width: '250px' }} />
        </Form.Item>
        <Form.Item
          name='passworld'
          rules={[{ required: true, message: '请输入密码' }]}
          style={{ display: 'flex', justifyContent: 'center' }}
        >
          <Input type='text' placeholder='密码' style={{ width: '250px' }} />
        </Form.Item>
        <Button onClick={login_click} className='login_button' type='primary'>
          登录
        </Button>
        <Divider />
        <Link to='/register'>没有新账号?注册新账号</Link>
      </Form>
    </LoginWrap>
  );
};

export default Login;
